<template>
	<div class="toolbar-container">
		<el-button-group class="ml4">
			<el-tooltip class="box-item" effect="dark" content="选框，多选节点">
				<el-button @click="selectNode">
					<SvgIcon name="select" />
				</el-button>
			</el-tooltip>
			<el-tooltip class="box-item" effect="dark" content="清空画布">
				<el-button @click="clearGraph">
					<SvgIcon name="delete" />
				</el-button>
			</el-tooltip>
		</el-button-group>
		<el-button-group class="ml4">
			<el-tooltip class="box-item" effect="dark" content="导入">
				<el-button @click="isImport = true">
					<SvgIcon name="import" />
				</el-button>
			</el-tooltip>
			<el-tooltip class="box-item" effect="dark" content="导出">
				<el-button @click="isExport = true">
					<SvgIcon name="export" />
				</el-button>
			</el-tooltip>
		</el-button-group>
		<el-button-group class="ml4">
			<el-tooltip class="box-item" effect="dark" content="撤销">
				<el-button @click="undo">
					<SvgIcon name="undo" />
				</el-button>
			</el-tooltip>
			<el-tooltip class="box-item" effect="dark" content="保留">
				<el-button @click="redo">
					<SvgIcon name="redo" />
				</el-button>
			</el-tooltip>
		</el-button-group>
		<el-button-group class="ml4">
			<el-button @click="zoomOut">
				<SvgIcon name="zoomout" />
			</el-button>
			<el-tooltip class="box-item" effect="dark" content="点击此处，恢复原始大小和位置" placement="bottom-start">
				<el-button style="padding: 4px" @click="resetZoom">{{ scale.percentage }}</el-button>
			</el-tooltip>
			<el-button @click="zoomIn">
				<SvgIcon name="zoomin" />
			</el-button>
			<el-tooltip class="box-item" effect="dark" content="自适应大小" placement="bottom-start">
				<el-button id="fitView" @click="fitView(100)">
					<SvgIcon name="dish" />
				</el-button>
			</el-tooltip>
		</el-button-group>
		<el-button-group class="ml4">
			<el-tooltip class="box-item" effect="dark" content="显示/隐藏 缩略图导航">
				<el-button @click="toggleMiniMap()" :type="showMiniMap ? 'primary' : 'default'">
					<SvgIcon name="camera" />
				</el-button>
			</el-tooltip>
			<el-tooltip class="box-item" effect="dark" content="查看代码" placement="bottom-start">
				<el-button :type="codeDrawerVisible ? 'primary' : 'default'" @click="catCode">
					<SvgIcon name="code" />
				</el-button>
			</el-tooltip>
		</el-button-group>
		<el-button-group class="toolbar-save">
			<el-button @click="onSaveData">
				<SvgIcon name="save" />保存
			</el-button>
			<el-button @click="onViewData">
				<SvgIcon name="view" />预览
			</el-button>
		</el-button-group>
	</div>

	<el-dialog v-model="isImport" title="导入" center>
		<div class="form-design-code-editor">
			<code-editor v-model="importCode" lang="json" />
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="isImport = false">取消</el-button>
				<el-button type="primary" @click="onChangeImportCode">确认导入</el-button>
			</span>
		</template>
	</el-dialog>
	<el-dialog v-model="isExport" title="导出" center>
		<el-radio-group v-model="exportType">
			<el-radio label="json">Json</el-radio>
			<el-radio label="png">Png</el-radio>
		</el-radio-group>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="isExport = false">取消</el-button>
				<el-button type="primary" @click="onExport">确认导出</el-button>
			</span>
		</template>
	</el-dialog>

	<el-drawer v-model="codeDrawerVisible" title="Json代码!" size="40%">
		<!--    <div class="form-design-code-editor">
      <code-editor v-model="lfCode" lang="json" readonly="true" />
    </div>-->
		<highlight autodetect :code="lfCode" />
	</el-drawer>
</template>

<script setup lang="ts">
import { inject, nextTick, provide, ref, unref } from 'vue';
import highlightjs from '@highlightjs/vue-plugin';
import { ElMessage } from 'element-plus';
import hljs from 'highlight.js/lib/core';
import json from 'highlight.js/lib/languages/json';
import xml from 'highlight.js/lib/languages/xml';
import 'highlight.js/styles/stackoverflow-light.css';
import { ModelerContext } from '../../useapi';
import { isJSON } from '../../../../utils/util';
import SvgIcon from '../../../component/svgIcon/index.vue';
import { updateChain } from '../../../../api/rule/rulechain';

const state: any = inject<any>('state');
const { onSave, getLfData } = state;

const modeler: ModelerContext = inject<any>('modeler_context');

const importCode = ref('');
const lfCode = ref('');

const {
	exportPng,
	exportData,
	showMiniMap,
	toggleMiniMap,
	scale,
	zoomOut,
	zoomIn,
	resetZoom,
	fitView,
	undo,
	redo,
	selectNode,
	modelType,
	clearGraph,
} = modeler;
const isImport = ref(false);
const isExport = ref(false);
const exportType = ref('json');

const codeDrawerVisible = ref(false);

hljs.registerLanguage('json', json);
hljs.registerLanguage('xml', xml);
const highlight = highlightjs.component;

const catCode = () => {
	codeDrawerVisible.value = true;
	let c: any = modeler.lf?.getGraphRawData();
	if (typeof c == 'object') c = JSON.stringify(c, null, 2);
	lfCode.value = c;
};

const onChangeImportCode = () => {
	if (isJSON(importCode.value)) {
		let data = JSON.parse(importCode.value);
		modeler.lf?.renderRawData(data);
	}
	isImport.value = false;
};

function getQueryParam(name: any) {
	name = name.replace(/[\[\]]/g, '\\$&');
	var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
		results = regex.exec(window.location.href);
	if (!results) return null;
	if (!results[2]) return '';
	return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

const onSaveData = async () => {
	const nData = getLfData();
	onSave(nData);
	const params = {
		id: getQueryParam('id'),
		ruleBase64: (await nData.ruleBase64).data,
		ruleDataJson: JSON.stringify({
			lfData: {
				...nData.lfData,
				dataCode: nData.data,
			},
		}),
	};
	updateChain(params).then((res) => {
		if (res.status == 0) {
			ElMessage({
				type: 'success',
				message: '保存成功',
			});
		}
	});
};

const onViewData = () => {
	window.open(window.location.origin + '#/rule/flow/view');
};

const onExport = () => {
	if (exportType.value === 'json') {
		exportData(modelType.name + '.json');
	}
	if (exportType.value === 'png') {
		exportPng(modelType.name, '#fff');
	}
};
</script>
